<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="main_pc">
        <title>火堆</title>       
        <link rel="stylesheet" href="${resource(dir: 'css_pc', file: 'bootstrap.min.css')}" type="text/css">
        <link rel="stylesheet" href="${resource(dir: 'css_pc', file: 'config.css')}" type="text/css">
        <link rel="stylesheet" href="${resource(dir: 'css_pc', file: 'default.css')}" type="text/css">
    </head>
<body>

	<section class="u-container">
        <div class="uc-left">
           <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>项目
                </div>
                <ul>
                    <li><a href="/scfire/project/projectSystemInfo">系统通知</a></li>
                    <li><a href="/scfire/user/userCenterDetail">管理项目</a></li>
                    <li><a href="/scfire/project/create">发起项目</a></li>
                </ul>
            </div>
            <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>设置
                </div>
                <ul>
                    <li class="active"><a href="/scfire/user/userAuth">实名认证</a></li>
                </ul>
            </div>
        </div>
        <div class="uc-right">
            <div class="certification-container">
                <div class="title">实名认证</div>
                <ul class="nav-bar process">
                    <li><span class="icon">1</span><span>授权协议</span></li>
                    <li><span class="icon">2</span><span>填写身份资料</span></li>
                    <li><span class="icon">3</span><span>绑定银行卡</span></li>
                    <li class="active"><span class="icon">4</span><span>验证手机号</span></li>
                    <li><span class="icon"></span><span>完成认证</span></li>
                </ul>
                <div class="content">
                    <ul>
                        <li class="active">
                            <article class="notice">
                                <div class="art-title">注意：</div>
                                <p>首次发起项目需要进行个人实名信息认证，火堆平台通过验证您的身份信息确保平台用户真实可信</p>
                                <p>您的身份信息将被加密，并由xxx保险担保其安全性。</p>
                                <p>认证过程需求授权“好信认证”获取您的个人信息并审核，同意请点“同意授权并进入认证</p>
                            </article>
                            <article class="clause">
                                <h4>认证服务条款</h4>
                                <ul>
                                    <li>
                                        <p class="title">1. 接受条款。</p>
                                        <p class="content">通过首页进入cniso.net网站即表示您同意自己已经与中国认证培训网 (中国认证培训网) 订立本协议，且您将受本协议的 条款和条件 ("条款") 约束。中国认证培训网可随时自行全权决定更改"条款"。如"条款"有任何变更，中国认证培训网将其网站 上刊载公告，通知予您。如您不同意相关变更，必须停止使用"服务"。经修订的"条款"一经在中国认证培训网网站的公布后，立 即自动生效。您登录或继续使用"服务"将表示您接受经修订的"条款"。除另行明确声明外，任何使"服务"范围扩大或功能增强的 新内容均受本协议约束。除非经中国认证培训网的授权高层管理人员签订书面协议，本协议不得另行作出修订。
                                        </p>
                                    </li>
                                    <li>
                                        <p class="title">2.谁可使用cniso.net？</p>
                                        <p class="content">"服务"仅供能够根据相关法律订立具有法律约束力的合约的个人或公司使用。因此，您的年龄必须在十八周岁或以上，才 可使用本公司服务。如不符合本项条件，请勿使用"服务"。中国认证培训网可随时自行全权决定拒绝向任何人士提供"服务"。"服务"不会提供给被暂时或永久中止资格的中国认证培训网会员。
                                        </p>
                                    </li>
                                </ul>
                            </article>
                            <div class="btn-container">
                                <div class="btn o" onclick="goStep(4)">同意授权并进入认证</div>
                            </div>
                        </li>
                        <li>
                            <form class="form-style1 fix-margin fix-height style1">
                                <!-- 请把form-tips放form-ctrl前面， 
						                            如果要显示info, 在form-item上加i （class），
						                            要显示err ，在form-item上加e （class），
						                            要显示right ，在form-item上加r （class）-->
                                <div class="form-item i">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的真实姓名</div>
                                        <div class="err"><span></span>请输入您的真实姓名</div>
                                        <div class="right"><span></span></div>
                                    </div>
                                    <label>真实姓名</label>
                                    <div class="form-ctrl">
                                        <input type="text" id="realName" placeholder="真实姓名" onblur="checkValid(this,function(data){if(data == '')return false;})">
                                    </div>
                                </div>
                                <div class="form-item i">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的身份证号</div>
                                        <div class="err"><span></span>请输入您的真实身份证号</div>
                                        <div class="right"><span></span></div>
                                    </div>
                                    <label>身份证号</label>
                                    <div class="form-ctrl">
                                        <input type="text" placeholder="身份证号" id="idNumber" onblur="checkValid(this, checkIdNumber)">
                                    </div>
                                </div>
                                <div class="form-item">
                                    <label>学校/单位全称</label>
                                    <div class="form-ctrl">
                                        <input type="text" placeholder="学校/单位全称"  id="school">
                                    </div>
                                    <div class="form-tips">
                                        <div class="right"><span></span>请输入您的学校</div>
                                    </div>
                                </div>
                                <div class="form-item i">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的个人简介</div>
                                        <div class="err"><span></span>请输入您的个人简介</div>
                                        <div class="right"><span></span></div>
                                    </div>
                                    <label>个人简介</label>
                                    <div class="form-ctrl">
                                        <textarea id="description" onblur="checkValid(this,function(data){if(data == '')return false;})"></textarea>
                                    </div>
                                </div>
                            </form>
                            <div class="btn-container">
                            	<div class="btn o" onclick="goStep(1)">上一步</div>
                                <div class="btn o" onclick="if(checkIdInfo()){goStep(3);}">下一步</div>
                            </div>
                        </li>
                         <li>
                            <form class="form-style1 fix-margin fix-height style3">
                                <div class="form-item">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的手机号码</div>
                                        <div class="err"><span></span>请输入您的真实姓名</div>
                                        <div class="right"><span></span></div>
                                    </div>
                                    <label for="">开户银行</label>
                                    <div class="form-ctrl fix-select">
                                        <input type="text" class="" readonly="" data-toggle="modal" data-target="#selectBank" />
                                        <span class="icon"><img src="${resource(dir:'img_pc',file:'icon-down.png')}"></span>
                                    </div>
                                </div>
                                <div class="form-item">
                                    <label for="">银行储蓄卡号</label>
                                    <div class="form-ctrl">
                                        <input class="" type="text" id="bankCard" onblur="checkValid(this, checkBankNumber)"/>
                                    </div>
                                </div>
                            </form>
                            <div class="btn-container">
                            	<div class="btn o" onclick="goStep(2)">上一步</div>
                                <div class="btn o" onclick="if(checkBankInfo()){goStep(4);}">下一步</div>
                            </div>
                            <div class="modal fade h1" id="selectBank" tabindex="-1" role="dialog" aria-labelledby="selectBankLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">合作银行/机构</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="">
                                                <div class="form-item select">
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="${resource(dir:'img_pc',file:'demo-bank.jpg')}">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="${resource(dir:'img_pc',file:'demo-bank.jpg')}">
                                                    </div>
                                                </div>
                                                <div class="form-item">
                                                    <div class="btn-container">
                                                        <div class="btn o">确定</div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <form class="form-style1 fix-margin fix-height style2">
                                <div class="form-item">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的手机号码</div>
                                        <div class="err"><span></span>请输入您的真实手机号码</div>
                                        <div class="right"><span></span></div>
                                    </div>
                                    <label for="">手机号码</label>
                                    <div class="form-ctrl">
                                        <input type="text" id="mobile" onblur="checkValid(this, checkPhoneNumber)"/>
                                    </div>
                                </div>
                                <div class="form-item r">
                                    <label for="">验证码</label>
                                    <div class="form-ctrl fix-right-space ">
                                        <input class="" type="text" id="authCode"/>
                                        <div class="btn o style1" onclick="sendSMS()">免费获取校验码</div>
                                    </div>
                                    <div class="form-tips fix-bottom" style="display: none;">
                                        <div class="right"><span></span>校验码已发送至您的手机，请注意查收</div>
                                    </div>
                                </div>
                            </form>
                            <div class="btn-container">
                            	<div class="btn o" onclick="goStep(3)">上一步</div>
                                <div class="btn o" onclick="submitAuthInfo()">提交信息</div>
                            </div>
                        </li>
                       
                        <li>
                            <div class="content-wrap finish fix-height style1">
                                <div class="c-img">
                                    <img class="" src="${resource(dir:'img_pc',file:'img-finish.png')}">
                                </div>
                                <h1>恭喜您，实名认证资料提交成功</h1>
                                <p>资料已进入审核阶段（2个工作日），现在您可以开始发起项目</p>
                            </div>
                            <div class="btn-container">
                                <div class="btn o btn-launch">发起项目</div>
                            </div>
                        </li>
                        <li>
                            <div class="content-wrap wait fix-height style1">
                                <div class="c-img">
                                    <img src="${resource(dir:'img_pc',file:'img-wait.png')}">
                                </div>
                                <h1>已进入审核阶段</h1>
                                <p>我们将在2个工作日内完成审核工作，请耐心等待</p>
                            </div>
                        </li>
                        <li>
                            <div class="content-wrap fail fix-height style1">
                                <div class="c-img">
                                    <span aria-hidden="true">&times;</span>
                                </div>
                                <h1>对不起，审核未通过</h1>
                                <p>请根据提示，修改未通过的资料信息，再提交实名资料</p>
                            </div>
                            <div class="btn-container">
                                <div class="btn o btn-chg-profile">修改个人资料</div>
                            </div>
                        </li>
                        <li>
                            <div class="content-wrap success fix-height style1">
                                <div class="c-img">
                                    <img src="${resource(dir:'img_pc',file:'img-finish.png')}">
                                </div>
                                <h1>恭喜您，实名认证成功！</h1>
                                <p>如需修改个人资料，可进入微信“火堆”公众号 -“个人中心”进行修改</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    


	<script type="text/javascript">

	var nextFlag = true;

	var isIdNumVailded = false;
	var isPhoneNumVailded = false;
	var isBankNumberVailded = false;
	var authCodeStats       = false;
	
	$(function() {
        //测试用。。。。
        document.addEventListener('keydown', function() {
            if (event.keyCode == 13)
                nextLi();
        })

        function nextLi() {
            var targetLi = $('.nav-bar.process ul li.active');
            // if(targetLi.index()) return;
            targetLi.removeClass('active').next().addClass('active');
            $('.certification-container .content ul li.active').removeClass('active').next().addClass('active');
        }
        
        goStep(4);

    })
    
    function goStep(n) {
	    $('.nav-bar.process>li').removeClass('active').eq(n-1).addClass('active');
		$('.uc-right>div>.content>ul>li').removeClass('active').eq(n-1).addClass('active');
		
	}

	function checkIdNumber(num){
        var code = num;
        var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};
        var tip = "";
        var pass= true;
        
        if(code == undefined){
        	tip = "code undefined";
            pass = false;
            if(!pass) alert(tip);
            return pass;
        }
        
        if(!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){
            tip = "身份证号格式错误";
            pass = false;
        }
        
      	if(!city[code.substr(0,2)]){
            tip = "身份证号格式错误";
            pass = false;
        }
        
        //if(!pass) alert(tip);
        isIdNumVailded = pass;
        return pass;
    }

    function checkPhoneNumber(value){
    	var mobile = value 
        if(!(/^1[3|5|8][0-9]\d{8}$/.test(mobile))){ 
            //alert("手机号格式错误");
            isPhoneNumVailded = false;
            return false; 
        }else{
        	isPhoneNumVailded = true;
            return true;
        } 
    }

    function checkBankNumber(value){
    	var mobile = value.value 
        if(!(/^\d{12}|\d{20}$/.test(mobile))){ 
            //alert("银行账号格式错误");
            isBankNumberVailded = false;
            return false; 
        }else{
        	isBankNumberVailded = true;
            return true;
        } 
    }


    function checkAuthCode(){
        var mobile = $("#mobile").val();
    	var value = $("#authCode").val();
    	$.ajax({
			url:"/scfire/user/authCode",
			type:'POST',
			data:{
				  "code":value,
				  "mobile":mobile
				  },
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				var result = JSON.parse(data).info.text;
				var code = JSON.parse(data).code;
				if(code=="200"){
				//	alert(result);
					authCodeStats = true;
				}else{
					alert('验证码校验失败！');
					authCodeStats = false;
				}				
			},
			error: function (data){
				alert('验证码校验失败！');
				authCodeStats = false;
			}
		}); 
    }

    function isMobileExist(mobile){
    	$.ajax({
			url:"/scfire/user/mobileExist",
			type:'POST',
			data:{
				  "mobile":mobile
				  },
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				var result = JSON.parse(data).info.text;
				var code = JSON.parse(data).code;
				if(code=="200"){
					//alert(result);
				}else{
					alert(result);
				}				
			},
			error: function (data){
				//
			}
		});
    }

    function isIDNumExist(idNum){
    	$.ajax({
			url:"/scfire/user/idExist",
			type:'POST',
			data:{
				  "idNum":idNum
				  },
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				var result = JSON.parse(data).info.text;
				var code = JSON.parse(data).code;
				if(code=="200"){
					//alert(result);
				}else{
					alert(result);
				}				
			},
			error: function (data){
				//
			}
		});
    }
    
    function sendSMS(){
		var mobile = $("#mobile").val();
        if(!isPhoneNumVailded){
        	alert("号码格式不正确，短信发送失败.");
        	return;
        }
    	$.ajax({
			url:"/scfire/SmsVerification/sendSmsVerification",
			type:'POST',
			data:{
				  "mobile":mobile
				  },
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				var result = JSON.parse(data).info.text;
				
				//show tips
				$("div.form-tips.fix-bottom").css('display','');
				
				if(data.code=="200"){
				//	alert(result);
				}else{
				//	alert(result);
				}				
			},
			error: function (data){
				alert("短信发送失败.请稍后再试");
			}
		});
    }
    
    function checkValid(obj, checkfun){
    	//get value
    	var value = $(obj).val()== undefined ? $(obj).text():$(obj).val();
    	var result = checkfun(value);
    	if(result == false){
    		//show err msg
    		$(obj).parent().parent().removeClass("i").removeClass("r").addClass("e");
    	}
    	else{
    		//show ok msg
    		$(obj).parent().parent().removeClass("i").removeClass("e").addClass("r");
    	}
    }
    
    function checkIdInfo(){
    	var realName = $("#realName").val();
    	var idNumber = $("#idNumber").val();
    	var school = $("#school").val();
    	var description = $("#description").val()== undefined ? $("#description").text():$("#description").val();
    	//var identifyimg = $("#identifyimg").val();
    	
    	var vailedFlag = true;
    	
    	if(!nullErrorAlert(idNumber, "请填写身份证号！")){
    		return false;
        }
        if(!isIdNumVailded){
    		alert("请先核对您的身份证号是否填写有误！");
    		return false;
        }
        
    	if(!nullErrorAlert(realName, "请填写您的姓名！")){
    		return false;
        }
    	//nullErrorAlert(school, "请您的学校！");
    	if(!nullErrorAlert(description, "请填写您的简介！")){
    		return false;
        }
    	//if(!nullErrorAlert(identifyimg, "请上传您的身份证正面照！")){
    		//return false;
        //}
		
        
        return true;
    }

    function nullErrorAlert(checkStr, infoStr){
    	if(checkStr == undefined){
    		alert(infoStr);
    		return false;
    	}
    	if(checkStr == ""){
    		alert(infoStr);
    		return false;
    	}
    	return true;
    }
    function checkBankInfo(){
    	var bankCard = $("#bankCard").val();
    	
    	//TODO BankName!?
    	var bankName = $("#bankName").find("option:selected").text();
    	bankName = " ";
    	
    	var vailedFlag = true;
    	
    	vailedFlag = nullErrorAlert(bankCard, "请填写银行卡号！");
    	if(!vailedFlag){
    		return false;
        }
        if(!isBankNumberVailded){
    		alert("请先核对您的银行账号是否填写有误！");
    		return false;
        }
        
    	vailedFlag = nullErrorAlert(bankName, "请选择开户银行！");
    	
    	if(!vailedFlag){
    		return false;
        }else{
        	return true;
        }
    }
    
	function submitAuthInfo(){
        
    	var realName = $("#realName").val();
    	var idNumber = $("#idNumber").val();
    	var mobile = $("#mobile").val();
    	var bankCard = $("#bankCard").val();
    	var bankName = $("#bankName").find("option:selected").text();
    	var school = $("#school").val();
    	var description = $("#description").val();
    	var identifyimg = $("#identifyimg").val();

    	if(!isIdNumVailded){
    		alert("请先核对您的身份证号是否填写有误！");
    		return ;
        }
    	if(!isPhoneNumVailded){
    		alert("请先核对您的手机号是否填写有误！");
    		return ;
        }
    	if(!isBankNumberVailded){
    		alert("请先核对您的银行账号是否填写有误！");
    		return ;
        }
        //简介不能为空
    	if(description.replace(/(^\s*)|(\s*$)/g, "").length ==0){
    		alert("请填写您的个人简介！");
    		return ;
        }

        //先校验验证码
        checkAuthCode();
        if(!authCodeStats){
        	alert("请填写正确的验证码！");
    		return ;
        }

        
    	$.ajax({
			url:"/scfire/user/userAuthSubmit",
			type:'POST',
			data:{"realName":realName,
				  "idNumber":idNumber,
				  "identifyimg":identifyimg,
				  "mobile":mobile,
				  "bankCard":bankCard,
				  "bankName":bankName,
				  "school":school,
				  "description":description},
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				if(data=="success"){
					//$('.d-warning').addClass('show');
					goStep(5);	
				}
							
			},
			error: function (data){
				alert("认证信息提交失败.");
			}
		});

		
    }
	</script>

</body>
</html>